<template>
  <d2-container>
    <el-card class="box-card">
    <el-form ref="Form" :model="FormData" :rules="Rules" size="medium" label-width="100px">
  <el-row>
    <el-col :span="12">
      <el-form-item label="客户名称" prop="customerName">
        <el-input v-model="FormData.customerName" placeholder="请选择客户名称" readonly :style="{width: '100%'}">
          <el-button slot="append" icon="fa fa-align-justify" @click="handleAddNew(1)"></el-button>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="10">
      <el-form-item label="证件类型" prop="idType">
        <el-input v-model="FormData.idTypeLabel" placeholder="请输入证件类型" readonly :disabled='true'
          :style="{width: '100%'}">
          </el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="证件号码" prop="idNumber">
        <el-input v-model="FormData.idNumber" placeholder="请输入证件号码" readonly :disabled='true'
          :style="{width: '100%'}"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="评级模板" prop="ratingTemplateLabel">
        <el-input v-model="FormData.ratingTemplateLabel" placeholder="请选择评级模板" readonly :style="{width: '100%'}">
          <el-button slot="append" icon="fa fa-align-justify" @click="handleAddNew(2)"></el-button>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="评级日期" prop="field118">
        <el-date-picker v-model="FormData.field118" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          :style="{width: '100%'}" placeholder="请选择评级日期" clearable></el-date-picker>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-form-item label="备注" prop="field124">
      <el-input v-model="FormData.field124" type="textarea" placeholder="请输入备注"
        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
    </el-form-item>
  </el-row>
  <el-form-item size="large">
    <el-button type="primary" @click="submitForm">启动</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>

    </el-card>
    <el-dialog
      :title="dialogName"
      :before-close="handleDialogClose"
      :visible.sync="dialogTableVisible"
      :destroy-on-close="!dialogTableVisible"
    >
      <el-row>
          <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
            <div v-if="num===1">
              <el-form-item>
              <el-input v-model="searchInfo.customerId" placeholder="客户号" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchInfo.customerName" placeholder="客户名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchInfo.idType" placeholder="证件类型" clearable>
                <el-option
                  v-for="item in idTypeOptions"
                  :key="Number(item.value)"
                  :label="item.label"
                  :value="Number(item.value)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchInfo.idNumber" placeholder="证件号码" clearable></el-input>
            </el-form-item>
            </div>
            <div v-if="num===2">
              <el-form-item>
              <el-input v-model="searchInfo.templateName" placeholder="模板名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchInfo.templateId" placeholder="模板编码" clearable></el-input>
            </el-form-item>
            </div>

            <el-form-item>
              <el-button plain size="medium" @click="handleCurrentChange(1)" icon="fa fa-search">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-col :xs="10">
              <el-table
                v-loading="loading"
                :data="customerList"
                style="width: 100%;"
                ref="customerListRef"
                border
                :fit="true"
                :header-cell-style="{'text-align':'center'}"
                v-if="num===1"
              >
                <el-table-column
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                  type="selection"
                ></el-table-column>
                <el-table-column
                  prop="id"
                  label="客户号"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="customerName"
                  label="客户名称"
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="idType"
                  label="证件类型"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                >
                <template slot-scope="scope">
                    {{getDictEntryInfo('id_type',scope.row.idType).label}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="idNumber"
                  label="证件号码"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="操作"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <el-button
                      title="选择"
                      @click="choose(scope.row)"
                      type="primary"
                      icon="fa fa-hand-pointer-o"
                      size="mini"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                v-loading="loading"
                :data="ratingTemplateList"
                style="width: 100%;"
                ref="ratingTemplateListRef"
                border
                :fit="true"
                :header-cell-style="{'text-align':'center'}"
                v-if="num===2"
              >
                <el-table-column
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                  type="selection"
                ></el-table-column>
                <el-table-column
                  prop="id"
                  label="模板编码"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="templateName"
                  label="模板名称"
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="templateType"
                  label="模板类型"
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                >
                <template slot-scope="scope">
                    {{getDictEntryInfo('template_type',scope.row.templateType).label}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="templateTermType"
                  label="模板种类"
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                >
                <template slot-scope="scope">
                    {{getDictEntryInfo('template_term_type',scope.row.templateTermType).label}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="financialAccounting"
                  label="财务占比（%）"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="nonFinancialAccounting"
                  label="非财务占比（%）"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="financialNonFinancialScoreGap"
                  label="财务得分与非财务得分分差为多少评级结果无效"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="isEnabled"
                  label="模板状态"
                  :show-overflow-tooltip="true"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.isEnabled === 1 ? 'success' : 'danger'"
                      disable-transitions
                    >
                      {{getDictEntryInfo('sys_common_status',scope.row.isEnabled).label}}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <el-button
                      title="选择"
                      @click="choose(scope.row)"
                      type="primary"
                      icon="fa fa-hand-pointer-o"
                      size="mini"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                align="left"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchInfo.pageNumber"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="searchInfo.total"
              ></el-pagination>

            </el-col>
        </el-row>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="handleSave"
          size="medium"
        >保存</el-button>
        <el-button size="medium" @click="handleDialogClose">取 消</el-button>
      </div> -->
    </el-dialog>
  </d2-container>
</template>
<script>
import { mapActions } from 'vuex'
import util from '@/libs/util'
export default {
  components: {},
  props: [],
  data () {
    return {
      loading: true,
      dialogTableVisible: false,
      dialogName: '',
      searchInfo: {
        id: '',
        customerId: '',
        templateId: '',
        customerName: '',
        idNumber: '',
        idType: '',
        templateType: 0,
        pageSize: 10,
        pageNumber: 1,
        total: 0
      },
      customerList: [],
      ratingTemplateList: [],
      idTypeOptions: [],
      FormData: {
        customerName: undefined,
        idType: undefined,
        idNumber: undefined,
        ratingTemplateId: undefined,
        ratingTemplateLabel: undefined,
        field118: null,
        field121: null,
        field122: undefined,
        field124: undefined,
        idTypeLabel: undefined
      },
      num: 0,
      Rules: {
        customerName: [{
          required: true,
          message: '请输入客户名称',
          trigger: 'blur'
        }],
        idType: [{
          required: true,
          message: '请输入证件类型',
          trigger: 'blur'
        }],
        idNumber: [{
          required: true,
          message: '请输入证件号码',
          trigger: 'blur'
        }],
        ratingTemplateId: [{
          required: true,
          message: '请输入评级模板',
          trigger: 'blur'
        }],
        field118: [{
          required: true,
          message: '请选择评级日期',
          trigger: 'change'
        }],
        field124: []
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    const _self = this
    _self.initDict()
  },
  methods: {
    ...mapActions('credit/customer', [
      'customerPage'
    ]),
    ...mapActions('credit/rating_template', [
      'ratingTemplatePage'
    ]),
    /**
     * 数据字典
     */
    initDict () {
      const _self = this
      _self.idTypeOptions = util.dict.getDictValue('id_type')
    },
    getDictEntryInfo (type, entryValue) {
      return util.dict.getDictEntryValue(type, entryValue)
    },
    submitForm () {
      this.$refs.Form.validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm () {
      this.$refs.Form.resetFields()
    },
    /**
     * 关闭弹出
     */
    handleDialogClose () {
      const _self = this
      _self.dialogTableVisible = false
      _self.dialogName = ''
      _self.initSearchInfo()
      _self.num = 0
      // _self.initRatingTemplateInfo()
      // _self.getPage()
    },
    /**
     * 新增
     */
    handleAddNew (num) {
      const _self = this
      if (num === 1) {
        this.dialogName = '关联客户名称'
        this.num = 1
        _self.getPage()
      } else {
        this.dialogName = '关联评级模板'
        this.num = 2
        _self.getPage()
      }
      // _self.initRatingTemplateInfo()
      _self.dialogTableVisible = true
    },
    /**
     * 保存
     */
    handleSave () {
      const _self = this
      // _self.$refs.userFormRef.validate((valid) => {
      //   if (valid) {
      //     if (_self.isUpdate) {
      //       _self.update()
      //     } else {
      //       _self.save()
      //     }
      //   } else {
      //     this.$message.error('表单校验失败，请检查')
      //   }
      // })
    },
    getPage () {
      const _self = this

      _self.loading = true
      if (this.num === 1) {
        _self.searchInfo.id = _self.searchInfo.customerId
        const params = JSON.parse(JSON.stringify(_self.searchInfo))
        _self.customerPage({ data: params }).then((result) => {
          _self.customerList = result.records.list
          _self.searchInfo.total = Number(result.records.total)
          _self.loading = false
        })
      } else {
        _self.searchInfo.id = _self.searchInfo.templateId
        const params = JSON.parse(JSON.stringify(_self.searchInfo))
        _self.ratingTemplatePage({ data: params }).then((result) => {
          _self.ratingTemplateList = result.records.list
          _self.searchInfo.total = Number(result.records.total)
          _self.loading = false
        })
      }
    },
    handleSizeChange (pageSize) {
      const _self = this
      _self.searchInfo.pageSize = pageSize
      _self.getPage()
    },
    handleCurrentChange (pageNumber) {
      const _self = this
      _self.searchInfo.pageNumber = pageNumber
      _self.getPage()
    },
    choose (row) {
      if (this.num === 1) {
        this.FormData.customerName = row.customerName
        this.FormData.idTypeLabel = this.getDictEntryInfo('id_type', row.idType).label
        this.FormData.idType = row.idType
        this.FormData.idNumber = row.idNumber
      } else {
        this.FormData.ratingTemplateId = row.id
        this.FormData.ratingTemplateLabel = row.id + '--' + row.templateName
      }

      this.handleDialogClose()
    },
    initSearchInfo () {
      this.searchInfo = {
        id: '',
        customerName: '',
        customerId: '',
        templateId: '',
        idNumber: '',
        idType: '',
        templateType: 0,
        pageSize: 10,
        pageNumber: 1,
        total: 0
      }
    }
  }
}

</script>
